import React, { Component } from 'react'
import { Button, Text, View } from 'react-native'
let txtStyle={fontSize:30}
class Upper extends Component{
  _userChangeWithUpper=()=>{
    // this.props.user.uname='Alice'
    this.props.onUserChange({uname:'Alice'})//payload
  } 
  render(){
    return <View>
    <Text style={[txtStyle,this.props.style]}>{this.props.user.uname.toUpperCase()}
    </Text>
    <Button title="从Upper中修改" onPress={this._userChangeWithUpper}/>
    </View>
  }
}
class Lower extends Component{
  render(){
    return <View><Text style={[txtStyle,this.props.style]}>{this.props.user.uname.toLowerCase()}</Text></View>
  }
}
export default class App extends Component {
  state={user:{uname:'John'}}
  _userChange=()=>{
    let user=this.state.user
    user.uname="Tom"
    this.setState({user})
  }
  _userChangeHandler=user=>{
    this.setState({user})
  }
  render() {
    return (
      <View>
        <Button title="从父组件改变" onPress={this._userChange}/>
        <Upper style={{color:'red'}} user={this.state.user}
         onUserChange={this._userChangeHandler}/>
        <Lower style={{color:'blue'}} user={this.state.user}/>
      </View>
    )
  }
}
